<template>
  <div>
    <div>
      <el-form :inline="true" style="margin: 20px">
        <el-form-item label="年份输入">
          <el-date-picker
            v-model="year"
            type="year"
            :clearable="false"
            value-format="yyyy"
            @change="changeYear"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划类型选择">
          <el-select @change="changePlanType" v-model="type" placeholder="计划类型" >
            <el-option label="计划类型" value="1"></el-option>
            <el-option label="计划调整类型" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <el-card>
      <el-table :key="tableKey" show-summary :summary-method="getSummaries" :data="tableData" border style="width: 100%">

        <!-- 第一列数据固定 -->
        <el-table-column width="120" align="center" :label="year + '年'" prop="planType" fixed>

          <!-- 在表头中放置选择框 -->
          <template slot="header">
            <div>
              {{ year }}年
            </div>
            <div>
              {{ type === '1' ? '计划类型' : '计划调整类型' }}
            </div>
          </template>

          <template slot-scope="scope">
            <!-- 根据选择框动态显示内容 -->
            <div v-if="scope.$index === 0">总部年度计划</div>
            <!--          <div v-if="scope.$index === 1">单位</div>-->
            <div v-else-if="scope.$index === 1">{{ completionPeriod }}</div>
          </template>
        </el-table-column>

        <!-- 探明储量 -->
        <el-table-column align="center" label="探明储量" prop="tmcl">
          <el-table-column>
            <el-table-column align="center" label="(万吨)" prop="tmcl">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      投资合计-->
        <el-table-column align="center" label="投资合计" prop="tzhj">
          <el-table-column>
            <el-table-column align="center" label="(亿元)" prop="tzhj">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      损益-->
        <el-table-column align="center" label="损益" prop="sy">
          <el-table-column>
            <el-table-column align="center" label="(亿元)" prop="sy">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      物探工程小计-->
        <el-table-column align="center" label="物探工程小计">
          <el-table-column align="center" label="投资" prop="wttz">
            <el-table-column align="center" label="(亿元)" prop="wttz">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="二维" prop="wt2">
            <el-table-column align="center" label="(km)" prop="wt2">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="三维" prop="wt3">
            <el-table-column align="center" label="(km²)" prop="wt3">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      探井工程合计-->
        <el-table-column align="center" label="探井工程合计">
          <el-table-column align="center" label="投资" prop="tjtz">
            <el-table-column align="center" label="(亿元)" prop="tjtz">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="tjks" width="50" >
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="tjjc">
            <el-table-column align="center" label="(万米)" prop="tjjc">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      东部常规探井-->
        <el-table-column align="center" label="东部常规探井">
          <el-table-column align="center" label="投资" prop="dbtz">
            <el-table-column align="center" label="(亿元)" prop="dbtz">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="dbks" width="50" >
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="dbjc">
            <el-table-column align="center" label="(万米)" prop="dbjc">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      西部常规探井-->
        <el-table-column align="center" label="西部常规探井">
          <el-table-column align="center" label="投资" prop="xbtz">
            <el-table-column align="center" label="(亿元)" prop="xbtz">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="xbks" width="50" >
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="xbjc">
            <el-table-column align="center" label="(万米)" prop="xbjc">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      页岩油-->
        <el-table-column align="center" label="页岩油探井">
          <el-table-column align="center" label="投资" prop="yyytz">
            <el-table-column align="center" label="(亿元)" prop="yyytz">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="口数" prop="yyyks" width="50" >
          </el-table-column>
          <el-table-column align="center" label="进尺" prop="yyyjc">
            <el-table-column align="center" label="(万米)" prop="yyyjc">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!--      其他探勘工程-->
        <el-table-column align="center" label="其他探勘工程">
          <el-table-column align="center" label="投资" prop="qttz">
            <el-table-column align="center" label="(亿元)" prop="qttz">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="备注" prop="qtbz">
          </el-table-column>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>
<script>
import { listInvestType, addInvestType, delInvestType,editInvestType  } from "@/api/vadmin/process/invest/investapi";
import { Decrypt } from "@/utils/AesHmacMD5";
export default {
  data() {
    return {
      name:'completionView',
      tableKey: Math.random(), //解决在el-table中，如果数据更新了，但是表格没有重新渲染的问题
      type: '1', // 默认值为计划类型
      year: new Date().getFullYear() + '', //年份
      //如何默认当前年份

      tableData: []
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    // 动态显示完成时间
    completionPeriod() {
      return this.type === '1' ? '1-10月完成' : '1-12月完成';
    },
  },
  methods: {
    getList(){
      listInvestType({year:this.year,type:this.type}).then(response => {
        if(response.code === 200 ) {
          this.tableData = JSON.parse(Decrypt(response.data)).results
          console.log(this.tableData, '=====>');
          // 遍历数组中的每个对象
          this.tableData.forEach(obj => {
            for (let key in obj) {
              if (obj.hasOwnProperty(key) && key.includes('ks')) {
                // 对值进行取整
                obj[key] = Math.round(parseFloat(obj[key]));
              }
            }
          });
          this.msgSuccess('查询成功');
        }

      });
    },
    //比例计算
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '完成比例';
          return;
        }

        // 获取列名
        const property = column.property;

        // 只对特定列进行计算
        if (['tzhj', 'sy', 'wttz', 'tjtz', 'dbtz', 'xbtz', 'yyytz'].includes(property)) {
          const numerator = parseFloat(data[1][property]);
          const denominator = parseFloat(data[0][property]);

          // 检查是否有效数字，并且避免分母为0
          if (!isNaN(numerator) && !isNaN(denominator) && denominator !== 0) {
            sums[index] = `${((numerator / denominator) * 100).toFixed(0)}%`;
          } else {
            sums[index] = ' '; // 如果计算无效，返回'N/A'或空
          }
        } else {
          sums[index] = ''; // 非指定列，不做处理
        }
      });

      return sums;
    },

    changePlanType() {
      this.tableKey = Math.random()
      this.getList()
    },
    changeYear() {
      this.tableKey += 1;  // 强制表格重新渲染
      this.getList()
    },

  }
};
</script>
